<template>
<div class="common">
  <el-card class="box-card">
    <div @click="back()" class="top">
    <i class="el-icon-back" style="font-size: 17px">&nbsp返回</i>
  </div>
    <div  class="text item">
      <img :src="getUrl(this.gamemessage.pic)" alt="图片未找到，已失效">
      <div style="display: inline-block">
        <p>NieR Replicant ver.1.22474487139...</p><br>
       <div style="padding-left: 40px;padding-top: 40px;">
         <img src="../Img/img.png" class="m" alt="图片消失">
         <span style="padding-left: 20px;font-size: 17px;color: #545c64">游戏评分: 7.4</span>
         <span style="padding-left: 150px;font-size: 17px">参考价：</span>
         <span style="font-size: 20px;color: red">￥</span>
         <span style="font-size: 40px;color: red">{{this.gamemessage.lastprice}}</span>
         <span class="price1">￥{{this.gamemessage.price}}</span>
         <el-tag effect="dark" >
          -{{cheap(this.gamemessage.price,this.gamemessage.lastprice)}}%
         </el-tag>
       </div>
      </div>
    </div>
    <el-divider style="line-height: 5px"></el-divider>


    <h3 style="margin: 20px 470px">为您寻找合适卖家</h3>
    <el-table
        :data="tempData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="sell"
          label="账户名"
          width="180">
        <template slot-scope="scope">
          <span>{{scope.row.sell}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="area"
          label="账户区服">
        <template slot-scope="scope">
          <span>{{scope.row.area}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="price"
          label="出售金额">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="lastprice"
          label="最低价">
        <template slot-scope="scope">
          <span>{{scope.row.lastprice}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="count"
        label="成交">
        <template slot-scope="scope">
          <span>{{scope.row.count}}</span>
        </template>
    </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" >
          <el-button type="info" v-show="hasuser"  round @click="buy(scope.row.gameId,scope.row.sell,scope.row.lastprice)">购买</el-button>
          <span v-show="hasuser1">您已拥有，不允许再次购买</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageCount"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <div>
    </div>
  </el-card>
</div>
</template>
<script>
import {getGameById, getGameList, buy, getBalance} from "../api";
import {mixin} from "../mixins/index";
export default {
  mixins: [mixin],
  name: "common",
  data(){
    return{
      gamemessage:[],
      userlist:[],
      tempData: [],
      pageCount:1,
      currentPage: 1,
      total:'',
      user:'',
      hasuser:true,
      hasuser1: false,
      balance:''
    }
  },
  methods:{
    back(){
      this.$router.go(-1);
    },
    handleSizeChange(val) {
      this.pageCount = val
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      let userlists = this.userlist
      this.tempData =  userlists.slice((val-1)*this.pageCount,this.pageCount*this.currentPage)
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    buy(id,sell,lastprice){
      //实时拿到用户数据
      const users = JSON.parse(localStorage.getItem("userInfo"));
      getBalance(users.id).then((res) =>{
        this.balance = res.data;
        if(this.balance-0<lastprice-0){
          this.$message.error("您的余额不够。请充值后继续购买")
        }else{
          this.$message.success("购买成功")
          buy(this.$store.getters.getUser.id,id,sell).then((res)=>{
            location.reload();
            this.$message.success("购买成功")
          })
        }
      })
    },
  },
  created() {
    getGameById(this.$route.query.id).then((res)=>{
      this.gamemessage = res.data.gamemessage;
    })
    this.user = this.$store.getters.getUser.username;
    const id = this.$route.query.id
    getGameList(id).then((res)=>{
      this.userlist = res.data.list;
      this.tempData= res.data.list
      this.tempData.map((item,i)=>{
        if(item.sell===this.$store.getters.getUser.username){
          this.hasuser = false
          this.hasuser1 = true
        }
      })
      this.total = res.data.list.length
      this.handleSizeChange(1)
      this.handleCurrentChange(1);
    })
  },
}
</script>

<style scoped>
.common{
  height: 900px;
}
.text {
  font-size: 14px;
  display: inline-block;

}
.item {
  display: inline-block;
  padding: 18px 0;
}
.box-card {
  width: 80%;
  margin: 20px 70px;
}
img{
  height: 109.6px;
  width: 234.4px;
  border-radius: 10px;
  display: inline;
  vertical-align: top;
}
p{
  display: inline;
  margin-left: 40px;
  /*padding-top: 20px;*/
  font-size: 25px;
  font-weight: bold;
  color: #545c64;
  opacity: 0.5;
}
.top:hover {
  cursor: pointer;
}
.m{
  height: 24.8px;
  width: 95.2px;
  padding-top: 23px;
  display:inline;
  border-radius: 10px;
  vertical-align: top;
}
.price1{
  padding-left: 40px;
  text-decoration: line-through;
  font-size: 20px;
}
.el-tag{
  margin-left: 20px;
}
.el-icon-back{
  transform: scale(1.1);
}
.el-divider .el-divider--horizontal{
  line-height: 5px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-table__row:hover{
  background-color: #22AC38;
}

.block{margin: 20px 30%;}
</style>
